import './BeiHuanBMapA01.scss'

import { Player, BigPlayButton } from 'video-react'
import { project } from '../../../../Common/Data'
import { FrontModalBox } from '../Modal'
import { useState } from 'react'

const { imageUrl } = project[window.location.hostname]

export const BeiHuanBMapA01 = () => {
    const DataA01 = {
        N: { uuid: 'N', label: '北岸港口', data: 500, n: 240, b: 260 },
        B: { uuid: 'B', label: '南岸港口', data: 600, n: 380, b: 220 },
    }
    const DataA02 = {
        N: { label: '北岸高点', url: 'https://stream.ljkjkf.com/vhls/10001/10001_live.m3u8' },
        B: { label: '南岸高点', url: 'https://stream.ljkjkf.com/vhls/10001/10001_live.m3u8' },
    }

    const DIVA01 = ({ data }) => {
        return (
            <div className="DIVA01">
                <div className={data.uuid}>
                    {data.label} : <span>{data.data}m³</span>
                </div>
                <img src={imageUrl + data.uuid + 'G.gif'} alt="" />
            </div>
        )
    }

    const DIVA02 = ({ data }) => {
        return (
            <div
                className="DIVA02"
                onClick={() => setOptionsCall({ type: 'Annex', data: { title: data.label, url: data.url } })}
            >
                <img src={imageUrl + 'monitor.png'} alt="" />
                <div>{data.label}</div>
            </div>
        )
    }

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="BeiHuanBMapA01">
            <Player fluid={false} width={'100%'} height={'100%'} playsInline autoPlay loop>
                <source src={imageUrl + 'guojiangtufangvideo.mp4'} />
                <BigPlayButton position="center" />
            </Player>
            {/* <div className="mask">
                <div className="NG">
                    <DIVA01 data={DataA01.N} />
                </div>
                <div className="BG">
                    <DIVA01 data={DataA01.B} />
                </div>

                <div className="NV">
                    <DIVA02 data={DataA02.N} />
                </div>
                <div className="BV">
                    <DIVA02 data={DataA02.B} />
                </div>
            </div> */}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
